<template>
	<div>
		<div class="wrap">
			<div class="tableWrap">
				<!-- <div class="searchWrap">
					<el-form :inline="true" :model="formInline" class="demo-form-inline">
					  <el-form-item>
					    <el-input v-model="formInline.code" placeholder="请输入编号"></el-input>
					  </el-form-item>
					  <el-form-item>
					    <el-button type="primary" class="searchBtn" @click="onSearch">查询</el-button>
					  </el-form-item>
					</el-form>
				</div> -->
				<tableInfo ref="table" :table="table">
					<template slot="operation" slot-scope="{ obj }">
					  <el-button type="text" @click="edit(obj)">编辑</el-button>
					</template>
				</tableInfo>
				<div class="paginationWrap">
					<pageCon ref="page" :total="total" @changePage="changePage"></pageCon>
				</div>
			</div>
			<div>
				<el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="left">
					<el-form-item label="名称" prop="goodsName">
					  <el-input v-model="form.goodsName"></el-input>
					</el-form-item>
					<el-form-item label="金额" prop="goodsPrice">
					  <el-input v-model="form.goodsPrice" type="number"></el-input>
					</el-form-item>
					<el-form-item label="总量" prop="goodsNum">
					  <el-input v-model="form.goodsNum" type="text"></el-input>
					</el-form-item>
					<el-form-item label="备注" prop="remarks">
					  <el-input v-model="form.remarks" type="text"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="" @click="reset('form')">重置</el-button>
						<el-button type="primary" @click="onSubmit('form')">提交</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
import tableInfo from '../../../components/table.vue';
import pageCon from '../../../components/page.vue';

import api from '@/api';
export default {
	components: {
		tableInfo,
		pageCon
	},
	data() {
		return {
			formInline:{
				code:''
			},
			form: {
			  goodsName: "",
			  goodsPrice: "",
			  goodsNum: "",
			  remarks:''
			},
			rules: {
			  goodsName: [
			    { required: true, message: "请输入名称", trigger: "change" },
			  ],
			  price: [
			    { required: true, message: "请输入金额", trigger: "change" },
			  ],
			  code: [
			    { required: true, message: "请输入编号", trigger: "change" },
			  ],
			},
			table: {
				loading: false,
				hasSelect: false,
				hasClickEvent: false,
				highlight: true,
				labelProps: [
					{ label: '名称', prop: 'goodsName' },
					{ label: '金额', prop: 'goodsPrice' },
					{ label: '总量', prop: 'goodsNum' },
					{ label: "备注", prop: "remarks", show: "template" },
					{ label: "操作", prop:'operation', show: "template" },
				],
				data: []
			},
			total: 0,
			pageNo:1
		};
	},
	mounted() {

	},
	methods: {
		edit(obj){
			this.form = Object.assign({}, obj);
		},
		onSearch(){
			this.pageNo = 1
			 this.initList();
		},
		changePage(val) {
		  this.currentPage = val;
		  this.pageNo = val
		  this.initList(val);
		},
		initList() {
			api.goods.getGoods({ 
				pageNo:this.pageNo, 
				pageSize:10
				})
				.then(res => {
					this.table.data = res.data.result;
					this.total = res.data.total
				});
		},
		
		onSubmit(formName) {
			
			this.$refs[formName].validate(valid => {
				if (valid) {
					api.goods.addGoods(this.form).then(res => {
						if (res.success) {
							this.$message({
								message: '提交成功',
								type: 'success'
							});
							this.initList()
							this.$refs[formName].resetFields();
							this.form.id=''
						} else {
							this.$message(res.msg);
						}
					});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		reset(formName) {
			this.$refs[formName].resetFields();
		}
	}
};
</script>

<style scoped>
	.wrap{
		display: flex;
	}
	
	.tableWrap{
		margin-right: 100px;
	}
	.searchWrap{
		text-align: left;
		margin: 20px 0;
	}
	.searchBtn{
		margin-left: 20px;
	}
	.paginationWrap{
		margin: 50px 0;
	}
</style>

